<template>
  <div :class="classObj">
    <vHead></vHead>
    <router-view id="content" />
    <vFooter></vFooter>
  </div>
</template>

<script>
import vHead from "./Header.vue";
import vFooter from "./Footer.vue";
export default {
  data: {
    routerName: "",
    classObj: {}
  },
  components: {
    vHead,
    vFooter
  },
  created() {
    this.createClass(this.$route.path);
  },
  methods: {
    createClass(path) {
      this.classObj = {};
      this.routerName = "router-" + path.slice(1).match(/\w+/);
      this.classObj[this.routerName] = true;
    }
  },
  watch: {
    "$route.path": function(newVal, oldVal) {
      this.createClass(newVal);
    }
  }
};
</script>

<style lang="less" scoped>
.router-downloadApp {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url(~static/image/download.png) center/cover no-repeat;
}
</style>
